<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>margin合并与避免</title>
		<style>
			/* 清除默认样式 */
			p {
				margin: 0;
			}

			.hrline {
				width: 40%;
				display: inline-block;
			}

			.rect {
				height: 50px;
				background-color: #8B008B;
				color: #fff;
			}

			.father {
				margin-top: 10px;
				background: #7FFFD4;
			}

			.son {
				margin-top: -40px;
				background: sandybrown;
				white-space: pre;
			}

			.forTop {

				background-color: #7FFFD4;
			}

			.forTop p {
				margin-top: 50px;
				background-color: #DEB887;
			}

			.aviod-marginTop {
				/* 1、设置border-top */
				/* border-top: 1px solid transparent; */
				/* 2、设置padding-top */
				/* padding-top: 1px; */
				/* 3、父元素设置为块级上下文 */
				/* overflow: hidden; */
			}
			
			.forBottom {
				background-color: #7FFFD4;
			}
			
			.forBottom p {
				margin-bottom: 50px;
				background-color: #DEB887;
			}
			
			.aviod-marginBottom {
				/* 1、设置border-bottom */
				/* border-bottom: 1px solid transparent; */
				/* 2、设置padding-bottom */
				/* padding-bottom: 1px; */
				/* 3、父元素设置为块级上下文 */
				/* overflow: hidden; */
				/* 4、下面相关高度任意设置一个 */
				/* height: 100px; */
				/* min-height: 100px; */
				/* 设置max-height必须不大于内容高度 */
				/* max-height: 20px; */
			}
		</style>
	</head>
	<body>
		<a href="../index.html">返回</a>
		<div class="rect">我是一条上边界,我有50px高，和楼下一样高哦！！！</div>
		<div class="father rect">
			<p class="son rect">margin——父子和兄弟的叠加规则都一样，同方向时，同号取大，异号相加。
ps：这里是孩子
			</p>
		</div>
		<hr class="hrline">分割线<hr class="hrline">
		<div class="rect">我是一条边界,我有50px高</div>
		<div class="forTop aviod-marginTop">
			<!-- <span>通用方法：在父元素首个DOM前，添加一个内联元素</span> -->
			<p>div中套用一个p标签，div子标签p拥有margin-top，避免margin-top合并见.aviod-marginTop</p>
		</div>
		<div class="rect">我是一条边界,我有50px高</div>
		<div class="forBottom aviod-marginBottom">
			<p>div中套用一个p标签，div子标签p拥有margin-top，避免margin-top合并见.aviod-marginBottom</p>
			<!-- <span>通用方法：在父元素尾DOM前，添加一个内联元素</span> -->
		</div>
		<div class="rect">我是一条边界,我有50px高</div>
	</body>
</html>
